<template>
  <div class="container">
    <el-card>
      <!-- 搜索区域 -->
      <el-row :gutter="20">
        <el-col :span="6" class="subjectsName">
          <span>关键字</span>
          <el-input v-model="queryList.keyword"></el-input>
        </el-col>
        <el-col :span="6" class="subjectsName">
          <span>状态</span>
          <el-select v-model="queryList.state" placeholder="请选择">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-col>

        <el-col :span="6">
          <el-button @click="clearInput">清除</el-button>
          <el-button type="primary" @click="getArticleList()">搜索</el-button>
        </el-col>
        <el-col :span="3" class="addArticles">
          <el-button
            type="success"
            icon="el-icon-edit"
            @click="addDialogVisible = true"
            >新增文章</el-button
          >
        </el-col>
      </el-row>

      <!-- 提示栏 -->
      <el-alert
        :title="'数据一共' + counts + '条'"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>

      <!-- 表格区域 -->
      <el-table :data="articleList" stripe style="width: 100%">
        <el-table-column label="序号" type="index"> </el-table-column>

        <el-table-column label="文章标题" prop="title" width="400">
          <template slot-scope="scope">
            <span class="title">{{ scope.row.title }}</span>
            <i
              v-if="scope.row.videoURL"
              class="el-icon-film"
              @click="videoShow = true"
              style="color: #00f"
            ></i>

            <!-- 视频弹出层 -->
            <div class="video-preview" v-if="videoShow">
              <div class="close" @click="videoShow = false">
                <i class="el-icon-close"></i>
              </div>
              <div class="box">
                <video :src="scope.row.videoURL" autoplay='autoplay'></video>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="阅读数" prop="visits"> </el-table-column>
        <el-table-column label="录入人" prop="username"> </el-table-column>
        <el-table-column label="录入时间">
          <template slot-scope="scope">
            <div>
              {{ scope.row.createTime | parseTimeByString }}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.state === 1">已启用</div>
            <div v-else>已禁用</div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="previeDialogVisibleShow(scope.row)"
              >预览</el-link
            >

            <el-link type="primary" @click="changeStateLink(scope.row)">
              {{ scope.row.state === 1 ? "禁用" : "启用" }}
            </el-link>

            <el-link
              type="primary"
              :underline="false"
              :disabled="scope.row.state ? true : false"
              @click="updateDialogVisibleShow(scope.row)"
            >
              修改
            </el-link>

            <el-link
              type="primary"
              :underline="false"
              :disabled="scope.row.state ? true : false"
              @click="deleteArticles(scope.row)"
            >
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryList.page"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="queryList.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
      >
      </el-pagination>

      <!-- 文章预览弹出层 -->
      <el-dialog title="文章预览" :visible.sync="previeDialogVisible">
        <articles-preview
          v-if="previeDialogVisible"
          :articleItem="articleItem"
        ></articles-preview>
      </el-dialog>

      <!-- 文章添加弹出层 -->
      <el-dialog title="添加文章" :visible.sync="addDialogVisible">
        <articles-add
          v-if="addDialogVisible"
          @close="addDialogVisible = $event"
          @add="add"
        ></articles-add>
      </el-dialog>

      <!-- 文章修改弹出层 -->
      <el-dialog title="修改文章" :visible.sync="updateDialogVisible">
        <articles-update
          :dataItem="dataItem"
          v-if="updateDialogVisible"
          @close="updateDialogVisible = $event"
          @update="update"
        ></articles-update>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
// 导入 api
import { list, changeState, remove } from '@/api/hmmm/articles'
// 导入预览文章组件
import ArticlesPreview from '@/module-hmmm/components/articles-preview'
// 导入添加文章组件
import ArticlesAdd from '@/module-hmmm/components/articles-add'
// 导入修改文章组件
import ArticlesUpdate from '@/module-hmmm/components/articles-update'

export default {
  name: 'articles',
  components: {
    'articles-preview': ArticlesPreview,
    'articles-add': ArticlesAdd,
    'articles-update': ArticlesUpdate
  },
  props: {},
  data () {
    return {
      queryList: {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: null
      },
      // 数据总条数
      counts: 0,
      // 文章列表
      articleList: [],
      // 控制视频播放状态
      videoShow: false,
      // 控制预览文章弹出框状态
      previeDialogVisible: false,
      articleItem: {},
      // 控制添加文章弹出框状态
      addDialogVisible: false,
      // 控制修改文章弹出框状态
      updateDialogVisible: false,
      dataItem: {}
    }
  },
  created () {
    this.getArticleList()
  },
  mounted () {},
  methods: {
    // 获取文章列表
    async getArticleList () {
      try {
        const { data: res } = await list(this.queryList)
        this.counts = res.counts
        this.articleList = res.items
      } catch (error) {
        this.$message('获取数据失败')
      }
    },

    // 更改文章状态
    async changeStateLink (data) {
      await changeState({
        id: data.id,
        state: data.state === 1 ? '0' : '1'
      })
      // 更新视图
      this.getArticleList()
    },

    // pageSize 改变时会触发
    handleSizeChange (newSize) {
      this.queryList.pagesize = newSize
      this.getArticleList()
    },

    // page 改变时会触发
    handleCurrentChange (newPage) {
      this.queryList.page = newPage
      this.getArticleList()
    },

    // 清空input
    clearInput () {
      this.queryList.state = null
      this.queryList.keyword = ''
      this.getArticleList()
    },

    // 删除文章
    async deleteArticles (data) {
      const result = await this.$confirm(
        '此操作将永久删除该学科, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (result !== 'confirm') {
        return this.$message.info('取消删除')
      }
      const res = await remove(data)
      if (res.status !== 200) {
        this.$message('删除失败')
      }
      // 更新视图
      this.getArticleList()
      this.$message.success('删除成功')
    },
    // 添加完成后更新视图
    add () {
      this.getArticleList()
    },
    // 弹出修改弹出框
    updateDialogVisibleShow (item) {
      this.dataItem = item
      this.updateDialogVisible = true
    },

    // 修改成功之后的操作
    update () {
      this.getArticleList()
    },

    // 预览文章
    previeDialogVisibleShow (data) {
      this.articleItem = data
      this.previeDialogVisible = true
    }
  },
  computed: {},
  watch: {},
  filters: {}
}
</script>

<style lang="scss" scoped>
.container {
  .subjectsName {
    display: flex;
    font-weight: 500;
    span {
      line-height: 33px !important;
      margin-right: 10px;
      color: #000;
    }
    .el-input {
      width: 200px;
    }
  }
  .addArticles {
    float: right;
  }
  .el-alert {
    margin: 15px 0;
  }
  .el-link {
    margin-right: 15px;
  }
  .el-pagination {
    margin: 20px 0;
    float: right;
  }
  .title {
    margin-right: 15px;
  }

  .video-preview {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 9999;
  }
  .close {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%);
    background: rgba(126, 126, 126, 0.1);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
  }
  .box {
    width: 600px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    video {
      width: 100%;
      height: 100%;
    }
  }
  .el-dialog__body {
    font-size: 14px;
    color: #606266;
  }
}
</style>
